<template>
  <div>
    <h3>charts</h3>
    <div id="main"></div>
    <div id="main2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";

export default {
  setup() {
    let myChart1;
    let myChart2;
    const chartInit = () => {
      // 基于准备好的dom，初始化echarts实例
      myChart1 = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart1.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "blue", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "transparent", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            smooth: true,
          },
        ],
      });
      // window.onresize = function () {
      //   myChart1.resize();
      // };
    };
    const chartInit2 = () => {
      // 基于准备好的dom，初始化echarts实例
      myChart2 = echarts.init(document.getElementById("main2"));
      // 绘制图表
      myChart2.setOption({
        title: {
          text: "周访问数",
        },
        legend: {
          top: "middle",
          left: "right",
          orient: "vertical",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            type: "pie",
            radius: [30, 100],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "rose 1" },
              { value: 38, name: "rose 2" },
              { value: 32, name: "rose 3" },
              { value: 30, name: "rose 4" },
              { value: 28, name: "rose 5" },
              { value: 26, name: "rose 6" },
              { value: 22, name: "rose 7" },
              { value: 18, name: "rose 8" },
            ],
          },
        ],
      });
      // window.onresize = function () {
      //   myChart2.resize();
      // };
    };
    onMounted(() => {
      chartInit();
      chartInit2();
      window.onresize = function () {
        myChart1.resize();
        myChart2.resize();
      };
    });
  },
};
</script>

<style lang="less" scoped>
#main,
#main2 {
  width: 50%;
  height: 300px;
  border: 1px solid #000;
}
</style>
